import {View, Button} from '@tarojs/components';
import Taro from '@tarojs/taro';
import {request, getAppCode} from "../../utils/index";
import './phoneModal.scss';


class PhoneModal extends Taro.Component {
    static options = {
        addGlobalClass: true
    };
    config = {
        component: true,
        componentGenerics: {
            UnionidModal: true
        }
    };

    state = {
        getSessionkey: '' //获取nu ni id所需要的getSessionkey
    };

    componentWillMount() {
        //获取unionId
        // getAppCode().then(code => {
        //     request({
        //         url: 'weiXinLoginByCode',
        //         data: {
        //             weiXinLoginRequest: code,
        //         }
        //     }).then(res => {
        //         this.setState({
        //             getSessionkey: res.sessionKey, //获取nu ni id所需要的getSessionkey
        //         })
        //     })
        // })
    }

    //取消获取nu ni id
    unGetUserInfo = () => {
        this.props.onCancel();
    };

    //获取手机号
    getPhoneNumber = (e) => {
        if (e.detail.encryptedData && e.detail.iv) {
            request({
                url: '/MiniPro/weiXinSavePhoneNumberInfo',
                data: {
                    encryptedData: e.detail.encryptedData,
                    iv: e.detail.iv,
                    session_key: this.sessionkey
                }
            }).then(res => {
                if (res) {
                    this.props.onCancel(1);
                } else {
                    this.props.onCancel();
                }
            })
        }
    };

    render() {
        return (
            <View className="have-union">
                <View className="union-wrap">
                    <View className="union-text">为了给您提供更优质的服务，现需您允许获取手机号。</View>
                    <View className="union-btn">
                        <View className='at-row btn-mg flex-lr'>
                            <View className='at-col flex-center'>
                                <Button className="close-btn" onClick={this.unGetUserInfo}>下次再说</Button>
                            </View>
                            <View className='at-col flex-center'>
                                <Button
                                    openType="getPhoneNumber"
                                    onGetphonenumber={this.getPhoneNumber}
                                    className="sumbit-btn"
                                >
                                    获取手机号
                                </Button>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

export default PhoneModal;

